<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-09-27 17:43:02
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2024-01-04 10:31:22
 * @FilePath: \mould\src\components\BehaViorManage\feedbackListText\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <!-- 小弹框 width:500,height:0.3,top:15%  -->
  <!-- 中弹框 width:800,height:0.5,top:10% -->
  <!-- 大弹框 width:1060,height:0.76,top:5% -->

  <div class="Control-1 mechanism_dialogS closure" id="comcn small">
    <el-dialog
      width="1060px"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      element-loading-spinner="el-icon-loading"
      title="详情"
      
      :visible.sync="visible"
      @close="closeDialog"
      :append-to-body="true"
      top="5%"
    >
      <div
        class="dialogBody common commonClassDialog moduleDialog"
        :style="{ height: dialogHeight }"
        style="width: 100%; display: flex; flex-direction: column"
      >
        <div class="tab">
          <div
            v-for="(data, index) in typeData"
            :key="data.value"
            @click="changeType($event, index)"
          >
            <div
              class="btn"
              :style="{
                color: data.show === true ? 'rgba(0, 117, 255, 1)' : '#343639',
                background: data.show === true ? '#E0EFFF' : '#fff',
              }"
            >
              {{ data.text }}
            </div>
          </div>
        </div>
        <div class="charts" v-show="typeData[1].show">
          <div style="height: 250px">
            <div class="baseTitle" style="margin-top: 8px">基础信息</div>
            <publicForm
              ref="publicForm"
              lableWidth="95px"
              :formObj="formObj"
              :formData="formData"
            >
            </publicForm>
          </div>
          <div style="flex: 1; height: calc(100% - 270px)">
            <div class="baseTitle" style="margin-top: 8px">实时动画</div>

            <div style="display: flex; height: calc(100% - 50px)">
              <div class="animation" style="width: 300px">
                <div class="animationtop">
                  <div class="animationLeft"></div>
                  <div class="animationRight animationLeft" :style="{transform: 'translateY(' + current.sdqsd + 'px)'}">
                    <!-- <div class="animationRights"></div> -->
                    <div class="circle"></div>
                    <div class="hline"></div>
                    <div class="bline"></div>
                    <div class="title">
                      <div class="line">
                        深度 <span>{{ current.sdqsd }}</span> m
                      </div>
                      <div class="line">
                        钻速 <span>{{ current.spjxzsd }}</span> cm/min
                      </div>
                      <div class="line">
                        电流 <span>{{ current.szgdl }}</span> A
                      </div>
                      <div class="line">
                        流量 <span>{{ current.sjgll }}</span> L/min
                      </div>
                    </div>
                  </div>
                </div>
                <div class="animationBottom">
                  <div class="animationBottomLeft">
                    <div class="circle"></div>
                    <div class="hline"></div>
                    <div class="bline"></div>
                    <div class="title">
                      设计桩长<span>{{ formData.fDesignpilelength }}</span
                      >m
                    </div>
                  </div>
                  <div class="animationBottomRight">
                    <!-- <div class="circle"></div>
                  <div class="hline"></div>
                  <div class="bline"></div>
                  <div class="title">设计桩长<span>{{formData.fDesignpilelength}}</span>m</div> -->
                  </div>
                </div>
              </div>
              <div class="table" style="flex: 1; height: 100%">
                <tableData
                  height="100%"
                  :config="table_config"
                  :dataList="tableData"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="charts" v-show="typeData[0].show">
          <div style="height: 250px">
            <div class="baseTitle" style="margin-top: 8px">基础信息</div>
            <publicForm
              ref="publicForm"
              lableWidth="95px"
              :formObj="formObj"
              :formData="formData"
            >
            </publicForm>
          </div>
          <div
            style="
              flex: 1;
              display: flex;
              flex-direction: column;
              height: calc(100%-280px);
            "
          >
            <div class="baseTitle" style="margin-top: 8px">曲线图</div>

            <div class="echartIcon">
              <echarts :commonData="tableData"></echarts>
            </div>
            <div class="echartIcon">
              <echarts1 :commonData="tableData"></echarts1>
            </div>
            <div class="echartIcon">
              <echarts2 :commonData="tableData"></echarts2>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>
<style lang="less" scoped>
@import "./index.less";
</style>
